<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <title>${listDto.status.label}案件</title>
    <link href="${contextPath}/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=h0EKj4yWH81COWhXGS4G7uyi"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>

<body>
<div class="pageheader">
    <h2>${listDto.status.label}案件列表</h2>
</div>
<div class="contentpanel">
    <form class="form-inline" id="filterForm">
        <input type="hidden" name="status" value="${listDto.status}" id="targetStatus"/>
        <input type="hidden" name="listStatus" value="${listDto.listStatus}" id="listStatus"/>
        <input type="hidden" name="categoryUuid" value="" id="categoryUuid"/>

        <div class="col-10" style="margin-bottom:10px;">
            <input type="text" class="form-control" name="key"
                   value="${listDto.key}" placeholder="创建人/电话/地点">

            <div class="input-group date form_date col-md-2">
                <input class="form-control start-time" name="startTime" size="16" type="text"
                       value="${listDto.startTime}" readonly
                       data-date="" data-date-format="yyyy-MM-dd" placeholder="开始时间"
                       data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            </div>
            <div class="input-group date form_date col-md-2">
                <input class="form-control end-time" name="endTime" size="16" type="text"
                       value="${listDto.endTime}"
                       readonly
                       data-date="" data-date-format="yyyy-MM-dd" placeholder="结束时间"
                       data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            </div>
            <select class="form-control" name="multi">
                <option value="true" ${listDto.multi? "selected='selected'":""} >多人模式</option>
                <option value="false" ${listDto.multi? "":"selected='selected'"}>单人模式</option>
            </select>
            <c:if test="${listDto.stubbornCount>0}">
                <select class="form-control" name="stubbornCount">
                    <c:forEach begin="1" end="15" var="index">
                        <option value="${index}" ${listDto.stubbornCount eq index? "selected='selected'":""} >${index}次指派仍未完成</option>
                    </c:forEach>
                </select>
            </c:if>
            <button type="submit" class="form-control btn-success">查询</button>

            <div class="pull-right">
                <a href="edit.htm" class="btn btn-primary" type="button">
                    <i class="fa fa-pencil mr5"></i>添加案件
                </a>
            </div>
        </div>
        <div class="col-10" style="margin-bottom:10px;">
            <select class="form-control categoryList">
                <option value="">案件类别</option>
                <c:forEach items="${listDto.caseCategoryDtoList}" var="i">
                    <option value="${i.uuid}" ${listDto.categoryUuid eq i.uuid?"selected":""}>${i.name}</option>
                </c:forEach>
            </select>
            <c:forEach items="${listDto.caseCategoryDtoList}" var="i">
                <custom:case_list_category item="${i}"/>
            </c:forEach>
        </div>
        <ul id="myTabs" class="nav nav-tabs" role="tablist">
            <c:forEach items="${listDto.listStatus.status}" var="listStatus">
                <li role="presentation" class="dropdown ${listDto.status eq listStatus?"active":""}">
                    <a href="#" class="dropdown-toggle statusItem" data-toggle="dropdown" targetStatus="${listStatus}"
                       listStatus="${listDto.listStatus}" aria-controls="myTabDrop1-contents" aria-expanded="false">
                            ${listStatus.label}
                    </a>
                </li>
            </c:forEach>
            <label class="pull-right btn btn-default">
                <input type="checkbox" id="refreshState" value="refreshState" checked="checked">
                60秒自动刷新
            </label>
        </ul>
    </form>

    <table class="table table-striped dataTable no-footer" id="table2" role="grid" aria-describedby="table2_info">
        <thead>
        <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="table2"
                rowspan="1" colspan="1" aria-sort="ascending">
                创建人
            </th>
            <th class="sorting_asc" tabindex="0" aria-controls="table2"
                rowspan="1" colspan="1" aria-sort="ascending">
                创建时间
            </th>
            <th class="sorting_asc" tabindex="0" aria-controls="table2"
                rowspan="1" colspan="1" aria-sort="ascending">
                案件类别
            </th>
            <th class="sorting_asc" tabindex="0" aria-controls="table2"
                rowspan="1" colspan="1" aria-sort="ascending">
                电话
            </th>
            <th class="sorting_asc" tabindex="0" aria-controls="table2"
                rowspan="1" colspan="1" aria-sort="ascending">
                位置描述
            </th>
            <th class="sorting_asc" tabindex="0" aria-controls="table2"
                rowspan="1" colspan="1" aria-sort="ascending">
                状态
            </th>
            <th class="sorting_asc" tabindex="0" aria-controls="table2"
                rowspan="1" colspan="1" aria-sort="ascending">
                处理人
            </th>
            <th class="sorting" tabindex="0" aria-controls="table2" rowspan="1" colspan="1">
                操作
            </th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${listDto.list}" var="item" varStatus="status">
            <tr class="gradeA ${status.index/2 eq 0?"odd":"even"}">
                <custom:case_list_item item="${item}"/>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <custom:page page="${listDto}"/>

    <c:if test="${not empty param.delete}">
        <script type="text/javascript">
            jQuery.gritter.add({
                title: '删除 成功!',
                class_name: "growl-success",
                sticky: false
            });
        </script>
    </c:if>
    <c:if test="${not empty param.edit}">
        <script type="text/javascript">
            jQuery.gritter.add({
                title: '新增/编辑 成功!',
                class_name: "growl-success",
                sticky: false
            });
        </script>
    </c:if>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

<script src="${contextPath}/resources/js/jquery.datatables.min.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="${contextPath}/resources/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script type="text/javascript">
    var timeout;
    $(function () {
        jQuery('#table2').dataTable({
            "bPaginate": false,// 分页按钮
            "bFilter": false,// 搜索栏
            "bLengthChange": false,// 每行显示记录数
            "bInfo": false,
            "aaSorting": [[1, 'desc']]
        });
        $('[data-toggle="popover"]').popover({html: true});
        refreshStateCheck();
        initDateTime();

        $(".categoryList").change(function () {
            var value = $(this).val();
            $("#categoryUuid").val(value);
            $(this).nextAll().addClass("hide");
            if (value != '') {
                $(".categoryList[parent=" + value + "]").removeClass("hide");
            }
        });
    });

    function initDateTime() {
        $(".end-time").click(function () {
            var startTime = $(".start-time").val();
            $('.end-time').datetimepicker('setStartDate', startTime);
        });
        $(".start-time").click(function () {
            var time = $(".end-time").val();
            $('.start-time').datetimepicker('setEndDate', time);
        });
        $(".glyphicon-remove").click(function () {
            var parents = $(this).parents(".input-group");
            var find = parents.find(".form-control");
            find.attr("value", "");
        });
    }

    $('.end-time,.start-time').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });

    $(".ShowContent").click(function () {
        var url = $(this).attr("url");
        $(".modal-content").load(url);
    });

    $("body").on("click", ".loadModal", function () {
        var url = $(this).attr("url");
        $(".modal-content").load(url);
    });

    $("#myTabs .statusItem").click(function () {
        var status = $(this).attr("targetStatus");
        var listStatus = $(this).attr("listStatus");
        $("#targetStatus").val(status);
        $("#listStatus").val(listStatus);
        $("#filterForm").submit();
    });

    $("#refreshState").click(function () {
        refreshStateCheck();
    });
    function refreshStateCheck() {
        var checkbox = document.getElementById('refreshState');
        if (checkbox.checked) {
            timeout = setTimeout("window.location.reload();", 60000);
        } else {
            clearInterval(timeout);
        }
    }
</script>

</body>
</html>
